// import React from "react";
import React from "./react";

class ChildCounter extends React.Component{
  constructor(props){
    super(props)
    this.state={
      number: 1
    }
  }

  static getDerivedStateFromProps(newProps,lastState){
    if(newProps.number % 2 === 0){
      return {
        number: newProps.number * 2
      }
    }else if(newProps.number % 3 === 0){
      return {
        number: newProps.number * 3
      }
    }else{
      return null
    }
  }
  

  render(){
      return (<span>
        {this.state.number}
      </span>)
  }
}

class Counter5 extends React.Component{
    constructor(props){
      super(props)
      this.state={
        number: 1
      }
    }

    handleClick =()=>{
      this.setState({
        number: this.state.number + 1
      })
    }


  
    render(){
        return (<React.Fragment>
         <ChildCounter number={this.state.number}/>
        <button onClick={this.handleClick}>+</button>
    </React.Fragment>)
    }
}

export default Counter5